<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>订单管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="lib/layui/css/layui.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="lib/layui/layui.all.js"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body>
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">演示</a>
        <a>
          <cite>导航元素</cite></a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>

    <!--搜索-->
    <div class="demoTable">
      订单号：
      <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
      </div>
      <button class="layui-btn layui-icon layui-icon-search" data-type="reload">搜索</button>
    </div>

<!--数据表格-->
    <table class="layui-hide" id="demo" lay-filter="test"></table>

<!--订单详情表格-->
    <div id="openOrderBox" style="display: none; padding: 10px;">
      <table id="openProductTable" lay-filter="openProductTable"></table>
      <table id="openAddressTable" lay-filter="openAddressTable"></table>
    </div>


    <!--图片模板-->
    <script type="text/html" id="imgtmp">
      <img src="{{'http://localhost:8080/pic/'+d.product_image}}" style="height: 100%;white-space: normal;">
    </script>

    <!--头工具栏-->
    <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
      </div>
    </script>
    

    <!--工具行-->
    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-xs" lay-event="edit">查看</a>
      <a class="layui-btn layui-btn-xs" lay-event="change">发货</a>
    </script>


    <script>
        layui.use(['table','layer','form'], function(){
            var table = layui.table
                ,form=layui.form
                ,layer=layui.layer
                ,$=layui.jquery;
            table.render({
                elem: '#demo'
                ,url:'http://localhost:8080/shopping/manage/order?type=list'
                //,url:'order.json'
                ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                    console.log(res)
                    return {
                        //"code": res.status, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.count, //解析数据长度
                        //"data": res.rows.item //解析数据列表
                        "code": res.status, //解析接口状态
                        //"count": res.data.length, //解析数据长度
                        "data": res.data //解析数据列表
                    };
                }
                ,request: {
                    pageName: 'pageNum' //页码的参数名称，默认：page
                    ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
                }
                ,response: {
                    dataName: 'data' //规定数据状态的字段名称，默认：code
                    //,statusCode: 0 //规定成功的状态码，默认：0
                    //,countName: 'total' //规定数据总数的字段名称，默认：count
                }
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,defaultToolbar: ['filter', 'exports', 'print']
                ,title: '订单列表'
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'order_no', title:'订单编号',event:'collapse', align:'center'}
                    ,{field:'payment', title:'交易总金额', align:'center'}
                    ,{field:'payment_type', title:'付款方式',  align:'center', templet: function(res){
                            return res.payment_type === 1?'在线支付':'货到付款'
                        }}
                    ,{field:'status', title:'订单状态',align:'center',templet:function (res) {
                            if(res.status === 0){return '已取消'}
                            else if(res.status === 1){return '未支付'}
                            else if(res.status === 2){return '已支付'}
                            else if(res.status === 3){return '已发货'}
                            else if(res.status === 4){return '交易成功'}
                            else {return '交易关闭'}
                        } }
                    ,{field:'payment_time', title:'支付时间', align:'center'}
                    ,{field:'send_time', title:'发货时间', align:'center'}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo',align:'center'}
                ]]
                ,page: true
                ,id: 'testReload'
            });



            //头工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：'+ data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选': '未全选');
                        break;
                };
            });

            //监听行工具事件
            table.on('tool(test)', function(obj){
                var data = obj.data;
                let cid = data.order_no //获取该行order_no
                console.log(cid)
                //console.log(obj)
                if(obj.event === 'change'){
                    layer.confirm("确定要发货吗？",{icon:3,title:"提示"}, function (index) {
                        $.ajax({
                            type:'POST',
                            url:'http://localhost:8080/shopping/manage/order?type=send_goods',
                            dataType:'json',
                            xhrFields: { withCredentials: true },
                            data:{'order_no':cid },
                            success:function (res) {
                                if(res.status === 0){
                                    layer.msg("发货成功！")
                                    table.render({
                                        elem: '#demo'
                                        ,url:'http://localhost:8080/shopping/manage/order?type=list'
                                        //,url:'order.json'
                                        ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                                            console.log(res)
                                            return {
                                                //"code": res.status, //解析接口状态
                                                "msg": res.msg, //解析提示文本
                                                "count": res.count, //解析数据长度
                                                //"data": res.rows.item //解析数据列表
                                                "code": res.status, //解析接口状态
                                                //"count": res.data.length, //解析数据长度
                                                "data": res.data //解析数据列表
                                            };
                                        }
                                        ,request: {
                                            pageName: 'pageNum' //页码的参数名称，默认：page
                                            ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
                                        }
                                        ,response: {
                                            dataName: 'data' //规定数据状态的字段名称，默认：code
                                            //,statusCode: 0 //规定成功的状态码，默认：0
                                            //,countName: 'total' //规定数据总数的字段名称，默认：count
                                        }
                                        ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                                        ,defaultToolbar: ['filter', 'exports', 'print']
                                        ,title: '订单列表'
                                        ,cols: [[
                                            {type: 'checkbox', fixed: 'left'}
                                            ,{field:'order_no', title:'订单编号',event:'collapse', align:'center'}
                                            ,{field:'payment', title:'交易总金额', align:'center'}
                                            ,{field:'payment_type', title:'付款方式',  align:'center', templet: function(res){
                                                    return res.payment_type === 1?'在线支付':'货到付款'
                                                }}
                                            ,{field:'status', title:'订单状态',align:'center',templet:function (res) {
                                                    if(res.status === 0){return '已取消'}
                                                    else if(res.status === 1){return '未支付'}
                                                    else if(res.status === 2){return '已支付'}
                                                    else if(res.status === 3){return '已发货'}
                                                    else if(res.status === 4){return '交易成功'}
                                                    else {return '交易关闭'}
                                                } }
                                            ,{field:'payment_time', title:'支付时间', align:'center'}
                                            ,{field:'send_time', title:'发货时间', align:'center'}
                                            ,{fixed: 'right', title:'操作', toolbar: '#barDemo',align:'center'}
                                        ]]
                                        ,page: true
                                        ,id: 'testReload'
                                    });
                                }else {
                                    console.log(res)
                                    layer.msg("发货失败！")
                                }
                            },
                            error:function () {
                                console.log("错误")
                            }
                        })
                        layer.close(index);
                        }
                    )
                }
                else if(obj.event === 'edit'){
                    console.log(cid)
                    layer.open({
                        type:1,
                        title:"订单详情",
                        area:["1000px","270px"],
                        content:$('#openOrderBox'),
                        success:function (index,layero) {
                            /*订单详情表格*/
                            table.render({
                                elem:'#openProductTable'
                                //,url:'detail.json'
                                ,url:'http://localhost:8080/shopping/manage/order?type=detail'
                                ,where: {"order_no": cid}
                                ,parseData: function(res){ //res 即为原始返回的数据
                                    console.log(res)
                                    var stuInfo = new Array()
                                    for (let i = 0;i<res.data.length;i++){
                                        for (let j = 0;j<res.data[i].orderDetailVOList.length;j++){
                                            let pid = res.data[i].orderDetailVOList[j].product_id
                                            let pn = res.data[i].orderDetailVOList[j].product_name
                                            let pim = res.data[i].orderDetailVOList[j].product_image
                                            let pp = res.data[i].orderDetailVOList[j].current_unit_price
                                            let qua = res.data[i].orderDetailVOList[j].quantity
                                            let tp = res.data[i].orderDetailVOList[j].total_price
                                            console.log(pid,pn,pim,pp,qua,tp)
                                            var jsonString = '{ "product_id":'+pid+',"product_name":"'+pn+'","product_image":"'+pim+'","current_unit_price":'+pp+',"quantity":'+qua+',"total_price":'+tp+'}';
                                            var obj = JSON.parse(jsonString);
                                            stuInfo.push(obj);
                                        }
                                    }

                                    console.log(stuInfo)
                                    return {
                                        "code": res.status, //解析接口状态
                                        //"count": res.data.length, //解析数据长度
                                        "data": stuInfo//解析数据列表
                                    };
                                }
                                /*,response: {
                                    dataName: 'data' //规定数据状态的字段名称，默认：code
                                    //,statusCode: 0 //规定成功的状态码，默认：0
                                    //,countName: 'total' //规定数据总数的字段名称，默认：count
                                }*/
                                ,page:false
                                ,cols:[[
                                    {field:'product_id',title:'产品编号',align:'center'}
                                    ,{field:'product_name',title:'产品名称', align:'center'}
                                    ,{field:'product_image', title:'产品图片', align:'center',templet:"#imgtmp"}
                                    ,{field:'current_unit_price', title:'下单价格' , align:'center'}
                                    ,{field:'quantity', title:'数量' , align:'center'}
                                    ,{field:'total_price', title:'价格' , align:'center'}
                                ]]
                            })

                            /*地址详情表格*/
                            table.render({
                                elem:'#openAddressTable'
                                //,url:'detail.json'
                                ,url:'http://localhost:8080/shopping/manage/order?type=detail'
                                ,where: {"order_no": cid}
                                ,parseData: function(res){ //res 即为原始返回的数据
                                    console.log(res)
                                    return {
                                        "code": res.status, //解析接口状态
                                        //"count": res.data.length, //解析数据长度
                                        "data": res.data //解析数据列表
                                    };
                                }
                                ,response: {
                                    dataName: 'data' //规定数据状态的字段名称，默认：code
                                    //,statusCode: 0 //规定成功的状态码，默认：0
                                    //,countName: 'total' //规定数据总数的字段名称，默认：count
                                }
                                ,page:false
                                ,cols:[[
                                    {field:'receiver_name',title:'收件人',align:'center',templet:function (d) {
                                            return d.addressVO.receiver_name
                                        }}
                                    ,{field:'receiver_phone',title:'固定电话', align:'center',templet:function (d) {
                                            return d.addressVO.receiver_phone
                                        }}
                                    ,{field:'receiver_mobile', title:'移动电话',   align:'center',templet:function (d) {
                                            return d.addressVO.receiver_mobile
                                        }}
                                    ,{field:'receiver_province', title:'省份' , align:'center',templet:function (d) {
                                            return d.addressVO.receiver_province
                                        }}
                                    ,{field:'receiver_city', title:'城市' , align:'center',templet:function (d) {
                                            return d.addressVO.receiver_city
                                        }}
                                    ,{field:'receiver_district', title:'区县' , align:'center',templet:function (d) {
                                            return d.addressVO.receiver_district
                                        }}
                                    ,{field:'receiver_zip', title:'邮编' , align:'center',templet:function (d) {
                                            return d.addressVO.receiverZip
                                        }}

                                ]]
                            })
                        },
                        error:function () {
                            console.log("查看错误")
                        }
                    })
                }
            });



            /*搜索重载*/
            var $ = layui.$, active = {
                reload: function(){
                    var demoReload = $('#demoReload');
                    console.log(demoReload.val())

                    //执行重载
                    table.reload('testReload', {
                        url:'http://localhost:8080/shopping/manage/order?type=search'
                        ,page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            order_no: demoReload.val()
                        }
                    }, 'data');
                }
            };

            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });


        })




    </script>



  </body>

</html>